<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
         /*清除内外边距*/
        *{
            margin: 0;
            padding: 0;
        }
         .fu{
             background-color: rgba(215,25,96,0.5);
             /*给父元素形成BFC结界保护边界
             防止父子粘连 即第一个子元素的上外间距与最后一个子元素的下外间距超出父元素范围*/
             overflow: hidden;
        }
         .z1{ margin-top: 50px/*增加上外间*/;
        }
         .z2{ margin: 50px 23px 30px 50px;/*外间距，赋值顺序上右下左*/
        }

         .z4{ margin-bottom: 50px;/*增加下外间*/
        }
        .fu>div{
        width: 100px;
            height: 100px;
            background-color: #33e8e2;
            border: 5px solid blueviolet;
            color: white;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
<!--    行内元素间距只在水平方向有用-->
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z4"></div>
</div>
</body>
</html>